<template>
  <div :style="style"
       class="right-menu"
       style="display: block;"
       v-show="show"
       @mousedown.stop
       @contextmenu.prevent>
    <slot></slot>
  </div>
</template>

<script>
export default {
	name: 'context-menu',
	data() {
		return {
			triggerShowFn: () => {},
			triggerHideFn: () => {},
			x: null,
			y: null,
			style: {},
			binded: false,
			show: false
		};
	},
	props: {
		value: Boolean,
		// 多处作用域
		multiple: Boolean,
		//   绑定的元素
		target: null
	},
	mounted() {
		this.bindEvents();
	},
	watch: {
		value(show) {
			this.show = show;
		},
		show(show) {
			this.$emit('input', show);
			if (show) {
				this.bindHideEvents();
			} else {
				this.unbindHideEvents();
			}
		},
		target(target) {
			this.bindEvents();
		}
	},
	methods: {
		// 初始化事件
		bindEvents() {
			this.$nextTick(() => {
				if (this.multiple) {
					this.triggerShowFn = this.contextMenuHandler.bind(this);
					this.triggerShowFn(this.target);
				} else {
					if (!this.target || this.binded) return;
					this.triggerShowFn = this.contextMenuHandler.bind(this);
					this.target.addEventListener('contextmenu', this.triggerShowFn);
					this.binded = true;
				}
			});
		},

		// 取消绑定事件
		unbindEvents() {
			if (!this.target) return;
			this.target.removeEventListener('contextmenu', this.triggerShowFn);
		},

		// 绑定隐藏菜单事件
		bindHideEvents() {
			this.triggerHideFn = this.clickDocumentHandler.bind(this);
			document.addEventListener('mousedown', this.triggerHideFn);
			document.addEventListener('mousewheel', this.triggerHideFn);
		},

		// 取消绑定隐藏菜单事件
		unbindHideEvents() {
			document.removeEventListener('mousedown', this.triggerHideFn);
			document.removeEventListener('mousewheel', this.triggerHideFn);
		},

		// 鼠标按压事件处理器
		clickDocumentHandler(e) {
			this.$emit('input', false);
		},

		// 右键事件事件处理
		contextMenuHandler(e) {
			this.x = e.clientX;
			this.y = e.clientY;
			this.layout();
			this.$emit('input', true);
			e.preventDefault();
		},

		// 布局
		layout() {
			this.style = {
				left: `${this.x + 10}px`,
				top: `${this.y}px`
			};
		}
	}
};
</script>
<style lang="less" scoped>
.right-menu {
	position: fixed;
	background: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
	// border: solid 1px rgba(0, 0, 0, 0.2);
	// border-radius: 3px;
	z-index: 23000;
	display: none;
	width: 130px;
	p {
		width: 100%;
		padding: 8px 20px;
		text-align: center;
		display: block;
		color: #333;
		margin-bottom: 0;
		border-bottom: 1px solid #ededed;
		position: relative;
		cursor: pointer;
		&:hover {
			background: #1ab394;
			color: #fff;
			cursor: pointer;
			div {
				display: block;
			}
		}
		em {
			margin-left: -1.2em;
			margin-right: 0.2em;
			&.icon-more {
				position: absolute;
				margin: 0;
				right: 4px;
				top: 11px;
			}
		}
		div {
			position: absolute;
			width: 100%;
			left: 119px;
			top: 0;
			background: #fff;
			border: 1px solid #ccc;
			z-index: 23000;
			display: none;
			p {
				padding: 8px 20px;
				/deep/ .el-checkbox__label {
					font-size: 12px;
				}
				&:hover {
					/deep/ .el-checkbox {
						.el-checkbox__label {
							color: #fff;
						}
						&.is-checked {
							.el-checkbox__inner {
								border: 1px solid #fff;
							}
						}
					}
				}
			}
		}
	}
}
</style>
